<!--
 * @Author: zll
 * @Date: 2024-05-21 20:02:39
 * @LastEditors: zll
 * @LastEditTime: 2024-05-22 18:48:22
 * @Description: file content
 * @FilePath: \erp-app\src\components\BillStatus.vue
-->
<template>
  <div class="f1">
    <div class="w1" :style="`${borderColor};${fontWidth};`">
      <div
        class="w2"
        :style="{
          borderColor: color,
          color: color,
          width: `${Number(props.width) - 50}rpx`,
          height: ` ${Number(props.width) - 50}rpx`,
          lineHeight: ` ${Number(props.width) - 50}rpx`,
        }"
      >
        {{ title }}
      </div>
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  title: {
    type: String,
    default: '已通过',
  },
  color: {
    type: String,
    default: '#09ad9c',
  },
  width: {
    type: String,
    default: '200',
  },
});

const borderColor = computed(() => {
  return `border-color: ${props.color}`;
});
const fontColor = computed(() => {
  return `color: ${props.color};`;
});
const fontWidth = computed(() => {
  return `width:${Number(props.width)}rpx;height:${Number(props.width)}rpx`;
});
</script>
<style scoped lang="scss">
.f1 {
  overflow: hidden;
  width: 180rpx;
  height: 180rpx;
  position: relative;
}
.w1 {
  position: absolute;
  top: -40rpx;
  right: -40rpx;
  // line-height: 120rpx;
  text-align: center;
  // width: 180rpx;
  // height: 180rpx;
  border: 2px solid;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.w2 {
  // line-height: 100rpx;
  text-align: center;
  // width: 100rpx;
  // height: 100rpx;
  border: 1px solid;
  border-radius: 50%;
  font-size: 24rpx;
  transform: rotate(45deg);
  font-weight: 400;
}
</style>
